<template>
  <div>
    <el-form ref="videoForm" :model="videoForm" label-width="70px">
      <el-card class="upload-content">
        <div slot="header">视频上传</div>
        <el-form-item class="upload-video" prop="video_url">
          <div slot="label">
            <div slot="label"><i style="color:red;">*</i>视频</div>

            <!-- <el-tooltip effect="dark" placement="top">
              <div slot="content" v-html="TotalTip.videoTip"></div>
              <i class="el-icon-question"></i>
            </el-tooltip> -->
          </div>
          <UploadVideo />
        </el-form-item>
        <el-form-item class="upload-cover" prop="img_url">
          <div slot="label">
            <div slot="label"><i style="color:red;"></i>封面</div>

            <!-- <el-tooltip effect="dark" placement="top">
              <div slot="content" v-html="TotalTip.coverTip"></div>
              <i class="el-icon-question"></i>
            </el-tooltip> -->
          </div>
          <UploadImage type="video" />
        </el-form-item>
      </el-card>
      <el-card class="basic-content">
        <div slot="header">基本设置</div>
        <el-form-item>
          <div slot="label">
            标签
            <el-tooltip effect="dark" placement="top">
              <div slot="content" v-html="TotalTip.tagTip"></div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <el-tag
            :key="tag.id"
            v-for="tag in dynamicTags"
            closable
            style="margin-right:15px;"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag.tag_name }}
          </el-tag>
          <el-button class="button-new-tag" size="small" @click="showTagDialog">
            <i class="el-icon-circle-plus-outline"></i>
            添加标签</el-button
          >
        </el-form-item>
        <el-form-item>
          <div slot="label">
            标题
          </div>
          <el-input
            style="width:300px;"
            show-word-limit
            maxlength="50"
            placeholder="请输入标题"
            v-model="videoForm.title"
          ></el-input>
        </el-form-item>
        <el-form-item prop="introl">
          <div slot="label">
            简介
          </div>
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            placeholder="请输入简介"
            v-model="videoForm.intro"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="CustomBtn" @click="publishVideo" type="warning"
            >发布视频</el-button
          >
        </el-form-item>
      </el-card>

      <TagDialog
        type="video"
        :ShowTagDialogVisible="ShowTagDialogVisible"
        @closeTagDialog="closeTagDialog"
      />
    </el-form>
  </div>
</template>

<script>
import { TotalTip } from '@/utils/tip'
import UploadImage from '@/components/Tools/UploadImage'
import UploadVideo from '@/components/Tools/UploadVideo'
import TagDialog from '@/components/Article/TagDialog'
import { Message } from 'element-ui'
export default {
  props: {},
  components: {
    UploadImage,
    UploadVideo,
    TagDialog
  },
  data() {
    return {
      videoForm: {},
      TotalTip: {},
      ShowTagDialogVisible: false,
      dynamicTags: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.TotalTip = TotalTip
    })
  },
  methods: {
    showTagDialog() {
      this.ShowTagDialogVisible = true
      this.$bus.$on('getTagsId', this.getTagList)
    },
    // 获取tag列表
    getTagList(item) {
      this.videoForm.tag_ids = item.tags_id
      // 重置数组
      this.dynamicTags = []
      let tagList = []
      item.tagList.forEach(tag => {
        tagList.push(tag)
      })
      this.dynamicTags.push(...tagList)
    },
    // 删除tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      let tagList = this.videoForm.tag_ids.split(',')
      console.log(tag)
      this.videoForm.tag_ids = tagList
        .filter(t => {
          return tag.id != t
        })
        .join(',')
    },
    // 发布视频
    async publishVideo() {
      // 整理数据
      this.videoForm.video_url = this.$store.state.video.video_url
      this.videoForm.img_url = this.$store.state.video.cover_url
      console.log(this.videoForm)
      if (!this.videoForm.video_url) return this.$message.error('数据不全')
      if (!this.videoForm.tag_ids) return this.$message.error('请选择标签')
      const datas = this.$qs.stringify(this.videoForm)
      const res = await this.$API.video.PublishVideo(datas)
      if (res.status == 200) {
        this.$message.success('发布成功')
        this.$router.push('/video')
      } else {
        this.$message.error('发布失败')
      }
    },
    closeTagDialog() {
      this.ShowTagDialogVisible = false
    }
  }
}
</script>

<style scoped>
.upload-content {
  width: 80%;
  margin: 0 auto;
}
.basic-content {
  width: 80%;
  margin: 20px auto;
}
</style>
